import React from 'react'
import './sass/playlist-newsong.scss'
import {axiosGet} from '../../axios'
import {url,newsong,musicurl} from '../../api'
import { PlayCircleOutlined  } from "@ant-design/icons";
import {inject,observer} from 'mobx-react'

@inject('song')@observer
 class playlistNewsong extends React.Component {
    constructor(props){ 
        super(props)
        this.state={
            newsongList:''
        }
    }
    componentWillMount(){
        this.getNewsong()
    }
    //  获取新歌排行
    getNewsong(){
        axiosGet(url,newsong)
        .then(data=>{
            if(data){
                this.setState({
                    newsongList:data.result
                })
            }
            
        })
    }
    //  切歌
    songSkip(item){
        axiosGet(url,musicurl,`id=${item.id}`)
        .then(data=>{
            this.props.song.setSong(data.data[0])
            this.props.song.setSongImgUrl(item)
        })
    }
    render(){
        return(
            <div className="playlist-newsong">
                <h3>最新音乐</h3>
                <hr />
                <div className='playlist-newsong-main'>
                    {this.state.newsongList &&
                        this.state.newsongList.map((item,index)=>{
                            return(
                            <div key={index} className='main-item' onClick={()=>{this.songSkip(item)}}>
                                <span>{index+1}</span>
                                <img src={item.picUrl} alt=""></img>
                                <span className='detail'>
                                <p>{item.name}</p>
                                <p>{item.song.artists[0].name}</p>
                                </span>
                                <PlayCircleOutlined className="play-icon" />
                            </div>
                            )
                        })
                    }
                </div>
            </div>
        )
    }
}
export default playlistNewsong